<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
    }
    .container {
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .nav-buttons {
      text-align: center;
      margin-bottom: 20px;
    }
    .nav-button {
      padding: 10px 20px;
      margin: 0 10px;
      border: none;
      border-radius: 5px;
      background-color: #1a73e8;
      color: white;
      cursor: pointer;
      font-size: 16px;
    }
    .nav-button:hover {
      background-color: #1356c8;
    }
    .article-list {
      list-style: none;
      padding: 0;
    }
    .article-item {
      border-bottom: 1px solid #eee;
      padding: 15px 0;
    }
    .article-item:last-child {
      border-bottom: none;
    }
    .article-title {
      margin: 0;
      color: #333;
      text-decoration: none;
    }
    .article-title:hover {
      text-decoration: underline;
    }
    .article-meta {
      font-size: 14px;
      color: #666;
      margin-top: 5px;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="nav-buttons">
    <button class="nav-button" onclick="switchCategory('recommended')">推荐</button>
    <button class="nav-button" onclick="switchCategory('hot')">热门</button>
    <button class="nav-button" onclick="switchCategory('followed')">关注</button>
  </div>
  <ul class="article-list">
    <!-- Articles will be dynamically inserted here -->
  </ul>
</div>

<script>
  // This is a mock function to simulate article data for each category
  function getArticlesForCategory(category) {
    switch (category) {
      case 'recommended':
        return [
          { title: '推荐的第一篇文章', meta: '作者 - 2023-11-12' },
          { title: '推荐的第二篇文章', meta: '作者 - 2023-11-11' },
        ];
      case 'hot':
        return [
          { title: '热门的第一篇文章', meta: '作者 - 2023-11-10' },
          { title: '热门的第二篇文章', meta: '作者 - 2023-11-09' },
        ];
      case 'followed':
        return [
          { title: '关注的第一篇文章', meta: '作者 - 2023-11-08' },
          { title: '关注的第二篇文章', meta: '作者 - 2023-11-07' },
        ];
      default:
        return [];
    }
  }

  // This function will update the article list based on the selected category
  function switchCategory(category) {
    const articles = getArticlesForCategory(category);
    const articleList = document.querySelector('.article-list');
    articleList.innerHTML = ''; // Clear the current list

    articles.forEach(article => {
      const li = document.createElement('li');
      li.className = 'article-item';
      li.innerHTML = `
            <a href="#" class="article-title">${article.title}</a>
            <div class="article-meta">${article.meta}</div>
        `;
      articleList.appendChild(li);
    });
  }

  // Initialize the recommended articles on page load
  document.addEventListener('DOMContentLoaded', () => {
    switchCategory('recommended');
  });
</script>

</body>
</html>